<template>
	<view class="index-container">
		<view>
			<view class="base-info">
				<view class="left-icon"></view>
				基础信息
			</view>
			<view class="base-box" v-if="personType == 3">
				<view class="base-item">
					<view class="base-img">
						<image src="../../static/index/56.png"></image>
					</view>
				</view>
				<view class="base-item">
					<view class="item-num">
						{{gridNum}}
					</view>
					<text class="base-text">网格数</text>
				</view>
				<view class="base-item">
					<view class="item-num">
						{{gridLeadNum}}
					</view>
					<text class="base-text">网格长</text>
				</view>
				<view class="base-item">
					<view class="item-num">
						{{gridPersonNum}}
					</view>
					<text class="base-text">网格员</text>
				</view>
			</view>
			<view class="base-box">
				<view class="base-item">
					<view class="base-img">
						<image src="../../static/index/45.png"></image>
					</view>
				</view>
				<view class="base-item" @click="goResident(0)">
					<view class="item-num">
						{{residentNum}}
					</view>
					<text class="base-text">居民数量</text>
				</view>
				<view class="base-item" @click="goResident(2)">
					<view class="item-num">
						{{permanentNum}}
					</view>
					<text class="base-text">常住人口</text>
				</view>
				<view class="base-item" @click="goResident(1)">
					<view class="item-num">
						{{floatResidentNum}}
					</view>
					<text class="base-text">流动人口</text>
				</view>
			</view>
			<view class="base-box">
				<view class="base-item">
					<view class="base-img">
						<image src="../../static/index/46.png"></image>
					</view>
				</view>
				<view class="base-item" @click="goCheckPoint(0)">
					<view class="item-num">
						{{checkPointNum}}
					</view>
					<text class="base-text">检查点数</text>
				</view>
				<view class="base-item" @click="goCheckPoint(7)">
					<view class="item-num">
						{{roomNum}}
					</view>
					<text class="base-text">房屋数量</text>
				</view>
				<view class="base-item" @click="goCheckPoint(8)">
					<view class="item-num">
						{{rentHouseNum}}
					</view>
					<text class="base-text">出租房屋</text>
				</view>
			</view>
			<view class="base-box">
				<view class="base-item" @click="goCheckPoint(1)">
					<view class="item-num">
						{{companyNum}}
					</view>
					<text class="base-text">企业数量</text>
				</view>
				<view class="base-item" @click="goCheckPoint(2)">
					<view class="item-num">
						{{villageNum}}
					</view>
					<text class="base-text">小区数量</text>
				</view>
				<view class="base-item" @click="goCheckPoint(5)">
					<view class="item-num">
						{{shopNum}}
					</view>
					<text class="base-text">商铺数量</text>
				</view>
				<view class="base-item" @click="goCheckPoint(3)">
					<view class="item-num">
						{{restaurantNum}}
					</view>
					<text class="base-text">餐饮店</text>
				</view>

			</view>
			<view class="base-box">
				<view class="base-item" @click="goCheckPoint(4)">
					<view class="item-num">
						{{clinicNum}}
					</view>
					<text class="base-text">个体诊所</text>
				</view>
				<view class="base-item" @click="goCheckPoint(6)">
					<view class="item-num">
						{{publicNum}}
					</view>
					<text class="base-text">其他</text>
				</view>
			</view>
			<view class="base-box">
				<view class="base-item">
					<view class="base-img">
						<image src="../../static/index/47.png"></image>
					</view>
				</view>
				<view class="base-item" @click="goInstallList">
					<view class="item-num">
						{{facilityNum}}
					</view>
					<text class="base-text">设施数量</text>
				</view>
			</view>
			<view class="base-info">
				<view class="left-icon"></view>
				图表详情
			</view>
			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="opts" :chartData="ringData" />
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :chartData="columnData" />
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				opts: {},
				columnData: {

				},
				ringData: {

				},
				rentHouseNum: 0,
				residentNum: 0,
				floatResidentNum: 0,
				permanentNum: 0,
				gridNum: 0,
				gridLeadNum: 0,
				gridPersonNum: 0,
				checkPointNum: 0,
				roomNum: 0,
				shopNum: 0,
				restaurantNum: 0,
				clinicNum: 0,
				companyNum: 0,
				facilityNum: 0,
				villageNum: 0,
				publicNum: 0
			}
		},
		onLoad(options) {
			this.getCheckStatic()
			this.getFacilityStatic()
		},
		onShow() {
			this.$common.setTitle(this.$config.communityName)
			if (uni.getStorageSync('login')) {
				this.getStatic()
			}
		},
		computed: {
			...mapState(['personType'])
		},
		methods: {
			...mapMutations(['setPersonType', 'setGridType']),
			getCheckStatic() {
				this.$http.post('gridSystem/summary/cpTypes').then(res => {
					if (res.code === 10000) {
						this.opts = {
							"title": {
								"name": res.data.总数
							}
						}
						this.ringData = {
							"series": [{
								"data": [{
									"name": `企业 ${res.data.公司占比}% ${res.data.公司数量}个`,
									"value": res.data.公司数量
								}, {
									"name": `餐饮店 ${res.data.餐饮店占比}% ${res.data.餐饮店数量}个`,
									"value": res.data.餐饮店数量
								}, {
									"name": `商铺 ${res.data.商铺占比}% ${res.data.商铺数量}个`,
									"value": res.data.商铺数量
								}, {
									"name": `小区 ${res.data.小区占比}% ${res.data.小区数量}个`,
									"value": res.data.小区数量
								}, {
									"name": `诊所 ${res.data.诊所占比}% ${res.data.诊所数量}个`,
									"value": res.data.诊所数量
								}, {
									"name": `公共区域 ${res.data.公共区域占比}% ${res.data.公共区域数量}个`,
									"value": res.data.公共区域数量
								}, {
									"name": `出租屋 ${res.data.出租屋占比}% ${res.data.出租屋数量}个`,
									"value": res.data.出租屋数量
								}, {
									"name": `自住房 ${res.data.自住房占比}% ${res.data.自住房数量}个`,
									"value": res.data.自住房数量
								}]
							}]
						}
					}
				})
			},
			getFacilityStatic() {
				this.$http.post('gridSystem/summary/deviceTypes').then(res => {
					if (res.code === 10000) {
						this.columnData = {
							"categories": ["监控设备", "消防栓", "微型消防站", "烟感"],
							"series": [{
								"name": "单位/个",
								"data": [{
									"value": res.data.监控设备数量,
									"color": "#4A86FF"
								}, {
									"value": res.data.消防栓数量,
									"color": "#FF8B43"
								}, {
									"value": res.data.微型消防站数量,
									"color": "#963FFF"
								}, {
									"value": res.data.烟雾传感器数量,
									"color": "#42D1D7"
								}]
							}]
						}

					}
				})
			},
			goAccount() {
				uni.navigateTo({
					url: '/fireGridCheck/uploadAccount/uploadAccount'
				})
			},
			goCheckPoint(type) {
				uni.navigateTo({
					url: '/fireGridCheck/allCheckPoint/allCheckPoint?type=' + type
				})
			},
			goResident(type) {
				uni.navigateTo({
					url: '/fireGridCheck/allResidentList/allResidentList?type=' + type
				})
			},
			goInstallList() {
				uni.navigateTo({
					url: '/fireGridCheck/allInstallList/allInstallList'
				})
			},
			getStatic() {
				this.$http.post('gridSystem/summary/totalCount').then(res => {
					if (res.code === 10000) {
						console.log(res)
						this.rentHouseNum = res.data.出租屋总数,
							this.residentNum = res.data.居民总数,
							this.floatResidentNum = res.data.流动居民总数,
							this.permanentNum = res.data.常住居民总数
						this.gridNum = res.data.网格总数
						this.gridLeadNum = res.data.网格长总数
						this.gridPersonNum = res.data.网格员总数
						this.checkPointNum = res.data.检查点总数
						this.roomNum = res.data.房屋总数
						this.shopNum = res.data.商铺总数
						this.companyNum = res.data.公司总数
						this.restaurantNum = res.data.餐厅总数
						this.villageNum = res.data.小区总数
						this.publicNum = res.data.其他总数
						this.clinicNum = res.data.诊所总数
						this.facilityNum = res.data.设备总数
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 300px;
	}

	// @import '../../style/index.scss';
</style>
